<!--
 * @Description: 全局文本溢出省略提示组件
 * @Author: Zhanghan
 * @Date: 2024-12-10 11:40:38
 * @LastEditTime: 2024-12-11 14:50:47
 * @LastEditors: Zhanghan
-->
<template>
  <ElTooltip
    effect="dark"
    :content="text"
    placement="top"
    popper-class="pro-ellipsis-tooltip"
  >
    <div :style="contentStyle" class="align-middle">{{ text }}</div>
  </ElTooltip>
</template>
<script setup lang="ts">
import { ElTooltip } from "element-plus";
import { type ProEllipsisProps } from "./props";

const props = withDefaults(defineProps<ProEllipsisProps>(), {
  maxWidth: 150,
  color: "#333",
  maxHeight: 20,
});

const contentStyle = {
  maxWidth: `${props.maxWidth}px`,
  maxHeight: `${props.maxHeight}px`,
  marginBottom: 0,
  color: `${props.color}`,
  overflow: "hidden",
  whiteSpace: "nowrap",
  // textOverflow: "ellipsis", // 添加这一行
};
</script>

<!-- 不能写到scoped里面 -->
<style lang="less">
.pro-ellipsis-tooltip {
  max-width: 250px !important;
  white-space: wrap;
}
</style>
